<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学生管理系统</title>
		<script src="./node_modules/layui/dist/layui.js"></script>
		<link rel="stylesheet" type="text/css" href="./node_modules/layui/dist/css/layui.css" />
		<link rel="stylesheet/less" type="text/css" href="./src/css/style.less" />
		<script src="./src/css/less.min.js"></script>
	</head>
	<body>
		<!-- 顶部内容 -->
		<header>
			<div class="layui-bg-cyan">学生管理系统</div>
			<ul class="layui-nav layui-bg-cyan" lay-bar="disabled">
				<li class="layui-nav-item" lay-unselect="">
					<a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img"></a>
					<dl class="layui-nav-child">
						<dd><a href="javascript:;">个人主页</a></dd>
						<hr>
						<dd style="text-align: center;"><a href="">退出</a></dd>
					</dl>
				</li>
			</ul>
		</header>
		<section>
			<!-- 侧边栏 -->
			<aside class="layui-bg-cyan">
				<ul class="layui-nav layui-nav-tree layui-bg-cyan layui-inline" lay-filter="demo">
					<li class="layui-nav-item layui-nav-itemed">
						<a href="javascript:;">列表管理</a>
						<dl class="layui-nav-child">
							<dd><a href="javascript:;">班级列表</a></dd>
							<dd><a href="javascript:;">学生列表</a></dd>
						</dl>
					</li>
				</ul>
			</aside>
			<!-- 内容区 -->
			<iframe src="./src/pages/classList.html"></iframe>
		</section>

		<script>
			layui.use(_ => {
				const { layer, form, $ } = layui;
				layer.msg('Hello World');
				//监听菜单的点击
				$('dl>dd:nth-child(1)').click(_ => {
					$('iframe').attr('src', './src/pages/classList.html')
				})
				$('dl>dd:nth-child(2)').click(_ => {
					$('iframe').attr('src', './src/pages/studentList.html')
				})
			})
		</script>
	</body>
</html>
